import qs from 'qs';
import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {CommentType} from 'types';
import dayjs from 'dayjs';
interface PropType {
  item: CommentType;
  index: number;
}
export default function DetailComment({item, index}: PropType) {
  const fromNow = dayjs(item?.createdAt).fromNow();
  return (
    <View style={styles.commentContainer}>
      <View>
        <Image
          key={item.id}
          style={styles.avatar}
          source={{uri: item.user?.avatar}}
        />
      </View>
      <View style={styles.userContainer}>
        <Text style={styles.userText}>
          {item.user.username} <Text>{fromNow}</Text>
        </Text>
        <Text style={styles.comment}>{item.comment}</Text>
      </View>
      <View>
        <Icon name="arrow-undo-outline" size={16} color="#D5EF7F" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  commentContainer: {
    flexDirection: 'row',
    marginBottom: 16,
  },
  userContainer: {
    marginLeft: 12,
    flex: 1,
  },
  avatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
  },

  userText: {
    paddingVertical: 2,
    fontSize: 12,
    color: '#8560A9',
  },
  commentTime: {
    fontSize: 10,
    color: '#BABABA',
    paddingLeft: 12,
  },
  comment: {
    fontSize: 14,
    color: '#666666',
  },
});
